

<script>
  function lop_show_ok( text ) {
    lop_all_show( "lop-msg-success", "icon-lop-success", text );
  }

  function lop_show_error( text ) {
    lop_all_show( "lop-msg-error", "icon-lop-error", text );
  }

  function lop_show_warn( text ) {
    lop_all_show( "lop-msg-warn", "icon-lop-warn", text );
  }

  $( () => {
    $( 'body' ).append( '<div class="lop-msg-box"></div>' );
  });

  function lop_all_show( cls1, cls2, text ) {

    let $msgBox = '<div class="lop-msg ' + cls1 + '">\n' +
      '    <i class="iconfont ' + cls2 + '"></i>\n' +
      '    <p class="lop-msg-text">' + text + '</p>\n' +
      '  </div>';

    $( '.lop-msg-box' ).prepend( $msgBox );
    $( '.lop-msg-box' ).css( 'z-index', '9999' );

    $( '.lop-msg-box' ).children( ':first' ).slideDown( 400 );

    setTimeout( function () {
      $( '.lop-msg-box' ).children( ':last' ).fadeOut( 400 );

      setTimeout( function () {
        $( '.lop-msg-box' ).children( ':last' ).remove();

        if ( $( '.lop-msg-box' ).children( '.lop-msg' ).length <= 0 )
          $( '.lop-msg-box' ).css( 'z-index', '-1' );
      }, 500 );
    }, 3000 );

  }

  export default {
    name: "lopPublic"
  }
</script>

<style lang="scss">
  @import "../../../assets/lop-icon.css";

  [class^="lop-"] {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #5e6d82;
    letter-spacing: 1.2px;
    line-height: 22px;
    font-size: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .lop-msg-box {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    min-height: 70px;
    min-width: 400px;
    display: flex;
    z-index: -1;
    flex-direction: column;

    .lop-msg {
      width: 100%;
      height: 50px;
      line-height: 30px;
      padding: 10px 20px;
      border-radius: 5px;
      margin: 10px 0;
      display: none;
      align-items: center;
      position: relative;

      .iconfont {
        display: inline-block;
        position: absolute;
        height: 30px;
        font-size: 16px;
        margin-right: 6px
      }

      .lop-msg-text {
        width: calc(100% - 30px);
        margin-left: 30px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        font-size: 16px;
      }
    }
  }

  .lop-title {
    position: relative;
    font-size: 20px;
    color: #303133;
    font-weight: bold;
  }

  .lop-detail {
    position: relative;
    font-size: 14px;
    color: #606266;
    font-weight: 400;
  }

  .lop-text {
    position: relative;
    font-size: 14px;
    color: #909399;
    font-weight: 400;
  }

  .lop-msg-success {
    box-shadow: rgba(103, 194, 58, 0.5) 0 0 6px;
    background: #f0f9eb;

    > * {
      color: #67C23A;
    }
  }

  .lop-msg-warn {
    box-shadow: rgba(230, 162, 60, 0.5) 0 0 6px;
    background: #fdf6ec;

    > * {
      color: #E6A23C;
    }
  }

  .lop-msg-error {
    box-shadow: rgba(216, 30, 6, 0.5) 0 0 6px;
    background: #faccc4;

    > * {
      color: #d81e06;
    }
  }
</style>
